import { Text, View, TouchableHighlight } from 'react-native';
import React from 'react';
import {

    Navigate, Routes, Route, useOutlet, useParams,
    MemoryRouter as Router,
    Outlet
} from "react-router-dom";


const Home = () => {

    const [messages, setMessages] = React.useState(false);
    const outlet = useOutlet();
    return (
        <View style={{ backgroundColor: "green", height: 100 }}>

            <Text>Welcome to the home page!</Text>
            <Text>-------{messages ? "messages" : "tasks"}-------</Text>
            {/* <Button title={`切换按钮:${!messages ? "messages" : "tasks"}`} onPress={() => {
                setMessages(!messages)
            }} /> */}
            {messages && (<Navigate to="/messages" replace={false} />)}
            {!messages && (<Navigate to="/tasks" replace={false} />)}
           ///输出
            {(outlet)}
        </View>
    );
};

const HomeMessages = () => {
    return (
        <View style={{ height: 200, backgroundColor: 'yellow' }}>
            <Text>Outlet Demo: HomeMessages page!</Text>
        </View>
    );
};

const HomeTasks = () => {
    return (
        <View style={{ height: 200, backgroundColor: 'blue' }}>
            <Text>Outlet Demo: HomeTasks page!</Text>
        </View>
    );
};
export function OytletExample() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />}>
                    <Route
                        path="messages"
                        element={<HomeMessages />}
                    />
                    <Route path="tasks" element={<HomeTasks />} />
                </Route>
            </Routes>
        </Router>
    );
}

export default OytletExample;